.crate-lists {
    display: flex;

    h2 {
        font-size: 105%;
        line-height: 20px;
    }

    > section { margin: 0 15px; }

    > section[aria-busy="true"] > h2::after {
        content: '';
        background-image: url('/assets/ajax-loader.gif');
        display: inline-block;
        height: 16px;
        width: 16px;
    }

    ul, ol { list-style: none; padding: 0; }
    li { margin: 8px 0; }

    li a {
        width: 100%;
        color: lighten($main-color, 10%);
        text-decoration: none;
        background-color: $main-bg-dark;
        font-size: 90%;
        padding: 20px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        img { vertical-align: middle; }
    }
    li a:hover { background-color: darken($main-bg-dark, 5%); }

}
